{%- liquid
  assign showQuickLinks = false
  if settings.quick_link_menu != blank and linklists[settings.quick_link_menu].links.size > 0
    assign showQuickLinks = true
  endif
-%}

<search-modal class="search-modal modal fade as-modal {{ background_color }} {{ text_color }} modal-fullscreen-lg-down"  data-bs-backdrop="false" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content {{ background_color }}">
      <div class="container">
        <div class="modal-search-form">
          {%- assign env = 'modal' -%}
          <predictive-search class="search-form-content h-100" data-env="{{ env }}" data-show-overlay="0">
            <div class="modal-search-content">
              <div class="d-flex">
                <button class="btn close-btn-mob p-0 border-0 as-close-btn d-lg-none" data-bs-dismiss="modal">
                  {% render 'icon-arrow-left' %}
                </button>
                <form id="search-form-{{ env }}" action="{{ routes.search_url }}" method="get" role="search" class="search-form as-predictive-search-form w-100">
                    <div class="d-flex justify-content-center flex-wrap w-100">
                      <div class="input-text">
                        <span class="search-icon active">
                          {% render 'icon-search' %}
                        </span>
                        <input 
                          type="text" 
                          name="q" 
                          autocomplete="off" 
                          autofocus
                          value=""
                          class="form-control as-search-input pe-6" 
                          placeholder="{{ 'sections.custom_search.placeholder' | t }}" 
                          aria-label="{{ 'sections.custom_search.placeholder' | t }}"
                          >
                        <input type="hidden" name="type" value="article,product,page"/>
                        <input name="options[prefix]" type="hidden" value="last">
                        <button type="button" class="btn clear-btn as-clear-btn border-0">
                          {% render 'icon-close-circle' %}
                        </button>
                      </div>
                    </div>
                    <button type="button" class="btn close-btn as-close-btn" data-bs-dismiss="modal">
                      {% render 'icon-close' %}
                    </button>
                </form>
              </div>
              
              {%- if showQuickLinks -%}
                <aside class="as-quick-links-results d-none">
                    <p class="predictive-search-title">{{ 'sections.custom_search.quick_link' | t }}</p>
                    <ul class="predictive-search-content">
                      {%- for link in linklists[settings.quick_link_menu].links limit:5 -%}
                        <li><a {% render 'link', link: link.url %} class="ellipsis-1" href="{{link.url}}">{{link.title}}</a></li>
                      {%- endfor -%}
                    </ul>
                  </aside>
                {%- endif -%}
              
              <aside class="as-predictive-links predictive-search-dropdown {{ background_color }} d-none">
                <div class="predictive-search-container">
                  <div class="results">
                    <div class="as-predictive-results predictive-results show" aria-labelledby="dropdownMenuLink">
                    </div>
                  </div>
                  <div class="loading">
                    <div class="d-flex justify-content-center loading-item">
                      <div class="spinner-border" role="status">
                        <span class="visually-hidden">Loading...</span>
                      </div>
                    </div>
                  </div>
                </div>
              </aside>
            </div>
          </predictive-search>
        </div>
      </div>
    </div>
  </div>
</search-modal>